<script lang="ts" setup>
//头部
import HeaderLeft from "@/components/Header/Header-Left.vue";
import HeaderRight from "@/components/Header/Header-Right.vue";
import HeaderMenu from "@/components/Header/Header-Menu.vue";

import { storeToRefs } from "pinia";
import useStatus from "../store/status";

// 实例化 store
const Status = useStatus();
//解构
const { menuSwitch, childSwitch, shade } = storeToRefs(Status);
</script>

<template>
  <nav
    id="ac-localnav"
    :class="{ 'active-nav': menuSwitch, 'active-child': childSwitch }"
  >
    <div class="ac-ln-wrapper">
      <!--背景-->
      <div class="ac-ln-background"></div>
      <!--菜单布局-->
      <div class="ac-ln-content">
        <!--标题-->
        <HeaderLeft></HeaderLeft>

        <!--搜索-->
        <HeaderRight></HeaderRight>
      </div>
      <!--详情菜单-->

      <HeaderMenu></HeaderMenu>
    </div>
  </nav>
  <!--遮罩-->
  <div
    id="topics-curtain"
    class="topics-curtain"
    :class="{ 'active-shade': shade }"
  ></div>
</template>

<style lang="less" scoped>
//顶部
#ac-localnav {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 52px;
  min-width: 1024px;
  z-index: 9997;
}

//公用
#ac-localnav {
  height: 4.05882rem;
  //固定顶部
  position: sticky;

  .ac-ln-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    z-index: 1;
  }
  //背景
  .ac-ln-background {
    background-color: rgba(255, 255, 255, 0.7);

    transition-property: backdrop-filter, -webkit-backdrop-filter,
      background-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.25, 1);
    transition-duration: 0.4s;
    transition-delay: 0s;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;

    backdrop-filter: saturate(180%) blur(20px);
  }
  //菜单布局
  .ac-ln-content {
    margin: 0 auto;
    max-width: 980px;
    padding: 0 22px;
    position: relative;
    z-index: 2;
    padding-left: calc(max(22px, env(safe-area-inset-left)));
    padding-right: calc(max(22px, env(safe-area-inset-right)));
  }
  .ac-ln-content::after {
    clear: both; //在左右两侧均不允许浮动元素。
  }

  //详情菜单

  .ac-ln-content::before,
  .ac-ln-content::after {
    content: " ";
    display: table;
  }
}

//遮罩
#topics-curtain {
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#topics-curtain {
  transition-property: opacity, z-index;
  transition-timing-function: cubic-bezier(0.4, 0, 0.25, 1);
  transition-duration: 0.4s;
  transition-delay: 0s;
}
//菜单切换
#ac-localnav.active-nav {
  //切换背景色
  .ac-ln-background {
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(255, 255, 255, 0.9);
  }
}
//遮罩切换
.active-shade {
  opacity: 1 !important;
  z-index: 9996 !important;
}
@media only screen and (max-width: 1044px) {
  #ac-localnav {
    min-width: 320px;
  }
}
@media only screen and (max-width: 767px) {
  #ac-localnav {
    height: 3.05882rem;
    .ac-ln-content {
      padding: 0 16px;
    }
  }
}

//移动端菜单
#ac-localnav.active-child {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10001;
  height: 100%;
  :deep(.ac-ln-wrapper) {
    .ac-ln-content {
      padding: 0;
    }
    .ac-ln-title {
      padding-left: 16px;
    }
    .ac-ln-menu {
      height: calc(100% - 48px);
      padding-left: 16px;
      padding-right: 16px;
      box-sizing: border-box;
      overflow-y: auto;
    }
    .ac-ln-menu-tray {
      max-height: none;
      overflow: visible;
      height: 100%;
      visibility: visible;
    }
    .ac-ln-menu-items {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      -webkit-transition-delay: 0.2s, 0.4s;
      transition-delay: 0.2s, 0.4s;
    }
    .topics-label {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition-delay: 0.22s;
    }
    .topic-item {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition-delay: 0.24s;
    }
    //图标反转
    .ac-ln-actions {
      i {
        transform: scaleY(-1);
        transition: transform 1s cubic-bezier(0.86, 0, 0.07, 1),
          transform-origin 1s cubic-bezier(0.86, 0, 0.07, 1);
      }
    }
  }
}
</style>
